<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动漫网站 - 最近更新</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->  
</head>  
<style>
    /* 样式表：styles.css */  
  
/* 清除默认的列表样式 */  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    overflow: hidden; /* 防止内容溢出容器 */  
    background-color: #333; /* 导航栏背景色 */  
}  
  
/* 导航栏中的链接 */  
nav ul li {  
    float: left; /* 让列表项浮动以水平排列 */  
}  
  
nav ul li a {  
    display: block; /* 将链接转换为块级元素以填充整个列表项空间 */  
    color: white; /* 链接文字颜色 */  
    text-align: center; /* 文字居中 */  
    padding: 50px 80px; /* 内边距 */  
    text-decoration: none; /* 去除下划线 */ 
    font-size: 40px; 
}  
  
/* 链接的鼠标悬停效果 */  
nav ul li a:hover {  
    background-color: #111; /* 鼠标悬停时的背景色 */  
}  
  
/* 头部区域 */  
header {  
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 垂直方向排列子元素 */  
    align-items: center; /* 子元素在交叉轴上居中（这里是水平居中） */  
    justify-content: space-between; /* 子元素在主轴上分布 */  
    padding: 20px; /* 内边距 */  
    background-color: #f2f2f2; /* 背景色 */  
}  
  
header h1 {  
    color: #333; /* 标题文字颜色 */  
    text-align: center; /* 标题文字居中 */  
    font-size: 80px;
}  
  
header p {  
    color: #666; /* 段落文字颜色 */  
    text-align: center; /* 段落文字居中 */  
    margin-bottom: 0; /* 底部外边距为0 */  
    font-size: 20px;
}  

.image-container {  
        display: flex;  
        flex-wrap: wrap; /* 允许图片换行显示 */  
        justify-content: space-between; /* 图片之间水平间距 */  
    }  

    .image-item {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        margin-bottom: 20px; /* 图片之间的垂直间距 */  
    }  
    .image-item h3 {  
        text-align: center; /* 标题居中 */  
        margin-top: 10px; /* 标题上方的间距 */  
    }  
/* 其他可能的样式，如响应式布局等 */  
/* ... */
.carousel {  
    position: relative;  
    width: 100%; /* 或者设置为具体宽度 */  
    overflow: hidden;  
}  
  
.carousel-images {  
    display: flex;  
    transition: transform 0.5s ease;  
}  
  
.carousel-image {  
    flex-shrink: 0;  
    width: 100%; /* 图片宽度等于轮播图容器宽度 */  
    height: auto; /* 图片高度自动 */  
    display: none; /* 初始隐藏所有图片，除了active的 */  
}  
  
.carousel-image.active {  
    display: block; /* 显示当前活动的图片 */  
}  
  
/* 控制按钮样式（可选） */  
#prevBtn, #nextBtn {  
    /* 样式定义 */  
}
</style>
<body>  
  
<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="#">首页</a></li>  
            <li><a href="#anime-list">动漫列表</a></li>  
            <li><a href="#">分类</a></li>  
            <li><a href="1.html">最近更新</a></li>  
            <li><a href="#">注册</a></li>  
            <li><a href="#">登录</a></li>  
            <li><a href="#">搜索</a></li>  
            <li><a href="#">浏览记录</a></li>  
            <li><a href="#news">新闻</a></li>  
            <li><a href="#contact">联系我们</a></li>  
        </ul>  
    </nav>  
<body>  
  
<div class="carousel">  
    <div class="carousel-images">  
        <img class="carousel-image active" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.8MSNFJOjjg71o9qw1OdjCgAAAA?rs=1&pid=ImgDetMain" alt="Image 1">  
        <img class="carousel-image" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OkeLmJgXZfjN4Nj3BUHAcQHaEc?w=305&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="Image 2">  
        <img class="carousel-image" src="image3.jpg" alt="Image 3">  
        <!-- 可以添加更多图片 -->  
    </div>  
</div>  
  
<!-- 控制按钮（可选） -->  
<button id="prevBtn">上一张</button>  
<button id="nextBtn">下一张</button>  
  
<script src="script.js"></script>  
</body>  
</html>